FinalTask 3: Integrating Bootstrap in your web design workflow
Back to Portfolio
Browser Output (Layout 1)
View Full in New Tab
HTML Code
View Code Picture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SJP Layout 1</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <h2>50% desktop <br> 100% mobile</h2> <div class="row"> <div class="col-12 col-lg-6 bg-primary text-white p-3 border border-light">1</div> <div class="col-12 col-lg-6 bg-success text-white p-3 border border-light">2</div> <div class="col-12 col-lg-6 bg-success text-white p-3 border border-light">3</div> <div class="col-12 col-lg-6 bg-danger text-white p-3 border border-light">4</div> </div> </div> </body> </html>
Browser Output (Layout 2)
View Full in New Tab
HTML Code
View Code Picture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SJP Layout 2</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <h2>50% , 25% and 25% desktop <br> 100% mobile</h2> <div class="row"> <div class="col-12 col-lg-6 bg-primary text-white p-3 border border-light">1</div> <div class="col-12 col-lg-3 bg-success text-white p-3 border border-light">2</div> <div class="col-12 col-lg-3 bg-success text-white p-3 border border-light">3</div> </div> </div> </body> </html>
Browser Output (Layout 3)
View Full in New Tab
HTML Code
View Code Picture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SJP Layout 3</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <h2>40% and 60% desktop <br> 100% mobile</h2> <div class="row"> <div class="col-12 col-lg-4 bg-primary text-white p-3 border border-light">1</div> <div class="col-12 col-lg-8 bg-success text-white p-3 border border-light">2</div> </div> </div> </body> </html>
Browser Output (Layout 4)
View Full in New Tab
HTML Code
View Code Picture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SJP Layout 4</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container-fluid mt-5 mb-5 p-5"> <h2 class="text-center my-4">Bootstrap Grid Responsive</h2> <div class="row g-4"> <div class="col-12 col-md-6 col-lg-4"> <div class="custom-card"> <h1 class="display-4">01</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit reiciendis maxime possimus assumenda quidem, soluta est quia harum dicta qui delectus corporis cupiditate saepe molestiae quod veniam neque quasi amet?</p> <button class="btn btn-primary">Read more...</button> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="custom-card"> <h1 class="display-4">02</h1> <p>Lorem ipsum dolor sit amet consectetur. adipisicing elit. Magni quis facilis porro illo molestiae! Cum eaque commodi impedit labore. Beatae, quidem tempore. Optio impedit commodi nemo dignissimos autem? Dolore, nostrum.</p> <button class="btn btn-primary">Read more...</button> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="custom-card"> <h1 class="display-4">03</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet provident labore eos aperiam fuga numquam delectus velit nam, blanditiis voluptates doloribus in aliquam, inventore perspiciatis tempora temporibus quos dignissimos optio.</p> <button class="btn btn-primary">Read more...</button> </div> </div> </div> </div> </body> </html>
CSS Code Layout 4
View Code Picture
.custom-card { padding: 40px; border: 1px solid #9c9c9cdb; border-radius: 10px; background-color: #ffffff; height: 100%; } .custom-card h1 { color: blue; font-weight: 700; margin-bottom: 30px; } .custom-card p { color: rgb(80, 80, 80); margin-bottom: 30px; }